<template>
    <div class="top">
        <div class="top-main">
            <div class="content">
                <ul class="top-right">
                    <li class="li1">
                        <!-- <router-link to="/index"> -->
                        <!-- <img src="@/assets/image/wx.png" alt=""> -->

<el-popover
    placement="bottom"
    width="200"
    trigger="hover">
    <img src="@/assets/image/qrcode_wx.jpg" width="180" alt="">
    <img src="@/assets/image/wx.png" alt="" slot="reference">
</el-popover>

<el-popover
    placement="bottom"
    width="200"
    trigger="hover">
    <img src="@/assets/image/qrcode_qq.png" width="180" alt="">
    <img src="@/assets/image/qq.png" alt="" slot="reference">
</el-popover>

                        <!-- </router-link> -->
                        <!-- <router-link to="/index"> -->
                        <!-- <img src="@/assets/image/qq.png" alt=""> -->
                        <!-- </router-link> -->
                    </li>
                    <li class="li2">
                        <!-- <router-link to="/index"> -->
                        <img src="@/assets/image/ipone.png" alt="">
                        <!-- </router-link> -->
                        <router-link to="/index">
                            <span>热线电话: 0595-87517718</span>
                        </router-link>
                    </li>
                    <li class="li3">
                        <a @click="dialogVisible = true">
                            <span>企业服务</span>
                        </a>
                    </li>
                    <li class="li4">

                        <div class="nickname" v-if="accountid > 0">
                            <router-link :to="userType != 'company'? '/account' : '/enterprise/center'">
                                <span>{{nickname || name}}</span>
                            </router-link>
                            <div class="column-line"></div>
                            <span @click="logout" class="logout">退出</span>
                        </div>
                        <div class="login-or-reg" v-else>
                            <router-link to="/login">
                                <span>个人登录</span>
                            </router-link>
                            <div class="column-line"></div>
                            <router-link to="/reg">
                                <span>注册</span>
                            </router-link>
                            <div style="margin-left: 10px; margin-right: 10px; display: inline-block;"></div>
                            <router-link to="/MainLogin">
                                <span>企业登录</span>
                            </router-link>
                            <div class="column-line"></div>
                            <router-link to="/enterprise-register">
                                <span>注册</span>
                            </router-link>
                        </div>

                    </li>
                    <li class="li6">
                        <span :class="{'is-active': $store.state.user.language == 't'}" @click="trans('t')">繁</span>
                        <div class="column-line"></div>
                        <span :class="{'is-active': $store.state.user.language == 's'}" @click="trans('s')">简</span>
                    </li>
                </ul>
            </div>
        </div>
        <el-dialog
            title="企业服务"
            :visible.sync="dialogVisible"
            width="500px">
            <div class="text-center">
                <el-button type="primary" @click="routerLink('/service-search')" size="large">已有申请号</el-button>
                <el-button type="primary" @click="routerLink('/service-apply')" size="large">新申请</el-button>
            </div>
            <span slot="footer" class="dialog-footer">
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: 'top',
    data: function () {
        return {
            dialogVisible: false,
            typeface: this.$store.getters.language,
            nickname: this.$store.getters.nickname,
            userType: this.$store.getters.userType,
            accountid: this.$store.getters.accountid,
            name: this.$store.getters.name
        }
    },
    watch: {
        $route() {
            // let app =  this;
            // setTimeout(() => {
            //     app.$zhTran(app.$store.state.user.language)
            // }, 1000);
        }
    },
    mounted() {
        let app = this;
        setInterval(() => {
            app.$zhTran(app.$store.state.user.language)
        }, 500)
    },
    methods: {
        trans(type) {
            this.$zhTran(type)
            this.$store.dispatch('setLanguage', type);
            // this.typeface = type
        },
        logout() {
            this.$store.dispatch('LogOut')
                .then((res) => {
                    if (res == 0) {
                        this.msgSuccess('退出成功')
                        this.$router.push("/")
                    } else {
                        this.msgError(res)
                    }
                }).catch((err) => {
                console.log(err)
            })
        }
    }
}
</script>
<style lang="scss" scoped="scoped">
.top {
    background: #3B4D66;
    width: 100%;
    min-width: 1200px;
    background: rgba(0,0,0,0.52);

    .top-main {
        width: 1200px;
        height: 40px;
        line-height: 40px;
        position: relative;
        margin-left: auto;
        margin-right: auto;
    }

    img {
        vertical-align: text-bottom;
    }

    .top-right {
        position: absolute;
        right: 0px;

        li {
            display: inline-block;

            span {
                color: #B4C2D4;
            }
        }

        .li1 {
            img {
                cursor: pointer;

                &:nth-of-type(1) {
                    display: inline-block;
                    margin-right: 21px;
                }

                &:nth-of-type(2) {
                    display: inline-block;
                }
            }

            margin-right: 27px;
        }

        .li2 {
            img {
                &:nth-of-type(1) {
                    display: inline-block;


                    margin-right: 12px;
                }

                &:nth-of-type(2) {
                    display: inline-block;

                }
            }

            margin-right: 38px;
        }

        .li3 {
            margin-right: 38px;

        }

        .li4 {
            margin-right: 28px;

            .column-line {
                height: 14px;
                border-right: 1px solid #6A7C96;
                display: inline-block;
                vertical-align: middle;
                margin-top: -3px;
                margin-left: 5px;
                margin-right: 5px;
            }

            span {
                cursor: pointer;
            }

            .logout {
                &:hover {
                    color: #fff;
                }
            }
        }

        .li6 {
            span {
                cursor: pointer;
            }

            span.is-active {
                color: #fff;
            }

            .column-line {
                height: 14px;
                border-right: 1px solid #6A7C96;
                display: inline-block;
                vertical-align: middle;
                margin-top: -3px;
                margin-left: 5px;
                margin-right: 5px;
            }
        }
    }
}

</style>
